<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>作者管理</el-breadcrumb-item>
      <el-breadcrumb-item>作者信息</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="15">
          <el-input
            placeholder="请输入内容"
            v-model="query"
            clearable
            @clear="getAuthorList"
            @blur="getInputAuthorList"
            @keyup.enter.native="getInputAuthorList"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getInputAuthorList"
            >
            </el-button>
          </el-input>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="addDialogVisible = true">
            添加作者
          </el-button>
        </el-col>
      </el-row>
      <!-- 客户列表显示区 -->
      <el-table v-loading="loading" :data="authorList" border stripe>
        <el-table-column type="index"> </el-table-column>
        <el-table-column prop="authorName" label="作者名称" width="180">
        </el-table-column>
        <el-table-column prop="authorEmail" label="作者邮箱"></el-table-column>
        <el-table-column
          prop="authorMobile"
          label="作者电话"
          width="150"
        ></el-table-column>
        <el-table-column prop="roleName" label="作者类型"></el-table-column>
        <el-table-column class="ede" label="操作" width="230">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-tooltip
              effect="dark"
              content="编辑"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="showEditDialog(scope)"
              >
              </el-button>
            </el-tooltip>

            <!-- 删除按钮 -->
            <el-tooltip
              effect="dark"
              content="删除"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="removeAuthorById(scope)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加客户对话框 -->
    <el-dialog
      title="添加作者"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addDialogClosed"
    >
      <!-- 填写信息 -->
      <div v-show="active === 0">
        <!-- 添加客户表单区域 -->
        <el-form
          :model="addForm"
          :rules="addFormRules"
          ref="addFormRef"
          label-width="100px"
          class="add_form"
          status-icon
        >
          <el-form-item label="作者名称" prop="authorName">
            <el-input
              v-model="addForm.authorName"
              placeholder="请输入作者名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="作者电话" prop="authorMobile">
            <el-input
              v-model="addForm.authorMobile"
              placeholder="请输入作者电话"
            ></el-input>
          </el-form-item>
          <el-form-item label="作者邮箱" prop="authorEmail">
            <el-input
              v-model="addForm.authorEmail"
              placeholder="请输入作者邮箱"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- 类别选择 -->
      <div v-show="active === 1">
        <el-form
          :model="addForm"
          :rules="classRule"
          ref="classFormRef"
          label-width="100px"
          status-icon
        >
          <el-form-item label="作者类型" prop="roleId">
            <el-select v-model="addForm.roleId" placeholder="请选择作者类型">
              <el-option
                v-for="role in classList"
                :key="role.roleId"
                :label="role.roleName"
                :value="role.roleId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <!-- 信息确认 -->
      <div v-show="active === 2 || active === 3">
        <el-form :model="configForm" label-width="100px" class="add_form">
          <el-form-item label="作者名称">
            <el-input v-model="configForm.authorName" disabled></el-input>
          </el-form-item>
          <el-form-item label="作者类别">
            <el-input v-model="configForm.roleName" disabled></el-input>
          </el-form-item>
          <el-form-item label="作者电话">
            <el-input v-model="configForm.authorMobile" disabled></el-input>
          </el-form-item>
          <el-form-item label="作者邮箱">
            <el-input v-model="addForm.authorEmail" disabled></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- 进度条 -->
      <el-steps :active="active" finish-status="success" simple>
        <el-step title="作者信息"></el-step>
        <el-step title="作者类别"></el-step>
        <el-step title="添加"></el-step>
      </el-steps>

      <div class="Btns">
        <el-button
          v-show="active !== 0"
          class="Btn"
          style="margin-top: 12px"
          @click="pro"
          >上一步</el-button
        >
        <el-button
          v-show="active === 0 || active === 1"
          class="Btn"
          style="margin-top: 12px"
          @click="next"
          >下一步</el-button
        >
        <el-button
          v-show="active >= 2"
          class="Btn"
          style="margin-top: 12px"
          @click="addInfo"
          >添加</el-button
        >
      </div>
    </el-dialog>

    <!-- 修改客户的对话框 -->
    <el-dialog
      title="修改作者信息"
      :visible.sync="editDialogVisible"
      width="50%"
      @close="editDialogClosed"
    >
      <el-form
        :model="editForm"
        :rules="editFormRules"
        ref="editFormRef"
        label-width="100px"
        class="edit_form"
        status-icon
      >
        <el-form-item label="作者名称" prop="authorName">
          <el-input v-model="editForm.authorName"></el-input>
        </el-form-item>
        <el-form-item label="作者类型" prop="roleId">
          <el-select v-model="editForm.roleId">
            <el-option
              v-for="role in classList"
              :key="role.roleId"
              :label="role.roleName"
              :value="role.roleId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="作者邮箱" prop="authorEmail">
          <el-input v-model="editForm.authorEmail"></el-input>
        </el-form-item>
        <el-form-item label="作者电话" prop="authorMobile">
          <el-input v-model="editForm.authorMobile"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editAuthorInfo"> 确 定 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import qs from "qs";

export default {
  data() {
    return {
      loading: false,
      //获取客户列表的参数对象
      query: "",
      //控制用户对话框的显示与隐藏
      addDialogVisible: false,
      // 作者信息
      authorList: [],
      //进度条控制
      active: 0,
      //类别信息
      classList: [],
      //添加客户信息
      addForm: {
        authorName: "",
        authorEmail: "",
        authorMobile: "",
        roleId: "",
      },
      //确认表
      configForm: {
        authorName: "",
        authorEmail: "",
        authorMobile: "",
        roleId: "",
        roleName: "",
      },
      //添加客户验证
      addFormRules: {
        authorName: [
          { required: true, message: "请输入作者名称", trigger: "blur" },
          {
            max: 20,
            message: "长度不大于 20 个字符",
            trigger: "blur",
          },
        ],
        authorEmail: [
          { required: true, message: "请输入作者邮箱", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        authorMobile: [
          { required: true, message: "请输入作者电话", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "请输入正确的作者电话",
            trigger: ["blur", "change"],
          },
        ],
      },
      //客户类别验证
      classRule: {
        roleId: [
          { required: true, message: "请选择作者类别", trigger: "blur" },
        ],
      },

      //控制修改用户对话框的显示与隐藏
      editDialogVisible: false,

      //编辑客户表
      editForm: {},

      //添加编辑验证
      editFormRules: {
        authorName: [
          { required: true, message: "请输入作者名称", trigger: "blur" },
          {
            max: 20,
            message: "长度不大于 20 个字符",
            trigger: "blur",
          },
        ],
        authorEmail: [
          { required: true, message: "请输入作者邮箱", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        authorMobile: [
          { required: true, message: "请输入作者电话", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "请输入正确的作者电话",
            trigger: ["blur", "change"],
          },
        ],
        roleId: [
          { required: true, message: "请选择作者类别", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //获取作者信息
    async getAuthorList() {
      this.loading = true;
      const { data: res } = await this.$http.get("/authorUser");
      if (res.status !== 200) return this.$message.error(res.msg);
      this.authorList = res.authorList;
      this.loading = false;
    },

    //模糊搜索展示
    async getInputAuthorList() {
      if (this.query === "") this.getAuthorList();
      const { data: res } = await this.$http.get("/authorUser");
      this.authorList = res.authorList.filter((item) => {
        return !item.authorName.indexOf(this.query);
      });
    },
    //获取客户类别信息
    async getClassList() {
      const { data: res } = await this.$http.get("/getAllAuthorRole");
      if (res.status !== 200) return this.$message.error(res.msg);
      this.classList = res.roleList;
    },
    //删除客户
    async removeAuthorById({ row: { authorId: authorId } }) {
      const confirmResult = await this.$confirm(
        "是否删除该客户, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult != "confirm") return this.$message.info("已取消删除");
      const { data: res } = await this.$http.get("/delAuthor", {
        params: { authorId },
      });
      if (res.status !== 200)
        return this.$message({
          message: res.msg,
          type: "error",
          duration: 500,
        });
      this.getAuthorList();
      this.$message({
        message: res.msg,
        type: "success",
        duration: 500,
      });
    },

    //监听添加用户对话框关闭事件
    addDialogClosed() {
      this.$refs.addFormRef.resetFields();
      this.active = 0;
      this.addForm.authorId = "";
    },

    //进度条上一个
    pro() {
      this.active--;
    },

    //进度条下一个
    next() {
      if (this.active === 0)
        this.$refs.addFormRef.validate((valid) => {
          if (!valid) return;
          this.active++;
        });
      else if (this.active === 1)
        this.$refs.classFormRef.validate(async (valid) => {
          if (!valid) return;
          this.configForm = { ...this.addForm };
          const { data: res } = await this.$http.get("/getAuthorRole", {
            params: { roleId: this.addForm.roleId },
          });
          this.configForm.roleName = res.roleName;
          this.active++;
        });
      else this.active++;
    },

    //添加信息
    async addInfo() {
      const { data: res } = await this.$http.post(
        "/addAuthor",
        qs.stringify(this.addForm)
      );
      if (res.status !== 200) return this.$message.error(res.msg);
      this.$message.success(res.msg);
      this.active = 3;
      this.getAuthorList();
      setTimeout(() => {
        this.addDialogClosed();
        this.addDialogVisible = false;
      }, 500);
    },

    //编辑窗口
    showEditDialog({ row: authorInfo }) {
      this.editDialogVisible = true;
      this.editForm = { ...authorInfo };
    },

    //编辑窗口关闭
    editDialogClosed() {
      this.$refs.editFormRef.resetFields();
    },

    //编辑确认
    async editAuthorInfo() {
      // 更新数据
      const { data: res } = await this.$http.post(
        "/updateAuthor",
        qs.stringify(this.editForm)
      );
      if (res.status !== 200)
        return this.$message({
          message: res.msg,
          type: "error",
          duration: 500,
        });
      this.getAuthorList();
      this.$message({
        message: res.msg,
        type: "success",
        duration: 500,
      });
      setTimeout(() => {
        this.editDialogClosed();
        this.editDialogVisible = false;
      }, 500);
    },
  },
  created() {
    this.getAuthorList();
    this.getClassList();
  },
};
</script>

<style>
.add_form {
  margin: 0 10%;
}

.edit_form {
  margin: 0 10%;
}

.Btns {
  display: flex;
  justify-content: flex-end;
}

.Btn {
  width: 150px;
  border-radius: 18px;
}

.el-tooltip {
  width: 47%;
}
</style>
